<template>
	<view class="contain ">
		<!-- 头部 -->
		<view class="cu-custom bg-top" :style="[{ height: CustomBar + 'px' }]">
			<view class="cu-bar bg-top fixed flex algin-center justify-center  padding-lr" :style="{
          height: CustomBar + 'px',
          paddingTop: StatusBar + 'px',
        }">
				<view class=" flex justify-center algin-center  ">
					<view class="text-white fu-fs32">首页</view>
				</view>
			</view>
		</view>
		<view class="padding-lr padding-bottom-120">
			<view class="flex algin-center text-white">
				<fu-image src="/static/home/message.png" mode=''
					class='fu-block-36 radius-16 margin-right-sm flex-shrink'>
				</fu-image>
				<swiper class="height-40 w90" autoplay :vertical='true' :disable-touch='true' :circular='true'>
					<block v-for="(item, index) in messageList" :key="index">
						<swiper-item>
							<view class=" text-cut" @click="handleJump"
								:data-url="'/pages/service-message/message/message-detail/index?id='+item.id">
								{{item.title}}
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="width-60 text-right" @click="handleJump"
					data-url="/pages/service-message/message/message-system/index?name=平台 ">
					<text class="cuIcon-right"></text>
				</view>

			</view>
			<view class="bg-white radius-16 padding margin-top">
				<view class="flex algin-center justify-between ">
					<view class="text-lg text-bold text-333">交易统计</view>
					<view class="flex algin-center bg-f8  padding-tb-4 radius-100 text-sm">
						<text class="margin-right-xs  padding-lr-16 height-40 line-height-40   radius-100"
							@tap="chooseTime(0)" :class="selecTime==0?'bg-theme text-white':'text-999'">今日</text>
						<text class="margin-right-xs  padding-lr-16 height-40 line-height-40   radius-100"
							@tap="chooseTime(1)" :class="selecTime==1?'bg-theme text-white':'text-999'">昨日</text>
						<text class="margin-right-xs  padding-lr-16 height-40 line-height-40   radius-100"
							@tap="chooseTime(2)" :class="selecTime==2?'bg-theme text-white':'text-999'">总计</text>
					</view>
				</view>
				<view class="flex algin-center justify-around margin-top ">
					<view class="flex algin-center  flex-direction w33">
						<view class="text-sm">销售金额(元)</view>
						<view class="fu-fs44  text-bold margin-top text-red ">{{statisticsInfo.order_money || 0}}
						</view>
					</view>
					<view class="flex algin-center  flex-direction w33">
						<view class="text-sm">订单数(单)</view>
						<view class="fu-fs44  text-bold margin-top text-333 ">
							{{statisticsInfo.order_num || 0}}
						</view>
					</view>
					<!-- 非入仓 -->
					<view class="flex algin-center  flex-direction w33" v-if='userInfo&&userInfo.run_type==2'>
						<view class="text-sm">店铺关注数</view>
						<view class="fu-fs44  text-bold margin-top text-333 ">
							{{statisticsInfo.collect_num || 0}}
						</view>
					</view>
				</view>
			</view>
			<!-- 非入仓     run_type为2 -->
			<view class="radius-16 bg-white  margin-top" v-if='userInfo&&userInfo.run_type==2'>
				<view class="padding text-lg text-bold text-333">待处理项</view>
				<view class="flex flex-wrap algin-center ">
					<view
						class="w25 padding-lr margin-bottom relative flex flex-direction align-center justify-center  bg-white "
						@tap='toOrder(item,index)' v-for="(item,index) in orderList" :key='index'>
						<image :src="item.thumb" mode="aspectFill" class="fu-block-80"></image>
						<text class="margin-top-sm">{{item.name}}</text>
						<view class="jiaobiao" v-if="item.num>0 ">{{ item.num }}</view>
					</view>
				</view>
			</view>
			<view class="bg-white padding margin-top radius-16">
				<view class=" " style="overflow: auto;">
					<view class=" text-lg text-bold text-333">趋势图</view>
					<view class="flex algin-center justify-between margin-top">
						<view class="text-lg  text-333">销售额(万元)</view>
						<view class="flex algin-center text-sm bg-f8 padding-lr-xs radius-8 text-999 padding-tb-4"
							@tap="toggleTab('date',1)">
							<view class="margin-right-xs">{{date_act1}}</view>
							<view class="cuIcon-right margin-top-6"></view>
						</view>
					</view>
					<view class="flex algin-center justify-around ">
						<view :prop="option" :change:prop="echarts.updateEcharts" id="myChart" class="echarts">
						</view>
					</view>
				</view>
				<view class=" bg-white  margin-top">
					<view class="flex algin-center justify-between">
						<view class="text-lg  text-333">订单量(单)</view>
						<view class="flex algin-center text-sm bg-f8 padding-lr-xs radius-8 text-999 padding-tb-4"
							@tap="toggleTab('date',2)">
							<view class="margin-right-xs">{{date_act2}}</view>
							<view class="cuIcon-right margin-top-6"></view>
						</view>
					</view>
					<view class="flex algin-center justify-around ">
						<view :prop="option1" :change:prop="echarts.updateEcharts1" id="myChart1" class="echarts">
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white padding margin-top radius-16">
				<view class="padding-tb-xs flex justify-between align-center">
					<view class="text-lg  text-333 text-bold  "> 排行榜 </view>
					<view class="   text-sm  ">
						<text class=" margin-right" @tap='chooseType(0)'
							:class="selecType==0?'text-theme':'text-999'">商品销售量</text>
						<text class="" @tap='chooseType(1)' :class="selecType==1?'text-theme':'text-999'">加购物车次数</text>
					</view>
				</view>
				<view class="find_list flex flex-direction margin-top" v-if="goodsList.length>0">
					<view style="min-height: 560rpx;">
						<view v-for="(item, index) in goodsList" :key="index" class="margin-bottom-sm">
							<view class=" flex align-center" v-if="index < 10">
								<text class="top_num radius-8" :class="'top_' + index"
									v-if="index<3">{{ index + 1 }}</text>
								<text class="top_num radius-8 top_3" v-if="index>2">{{ index + 1 }}</text>
								<view class="flex-sub  flex align-center fu-hot-name">
									<fu-image :src="item.thumb" mode='aspectFill'
										class='fu-block-176 radius-16 margin-right-sm flex-shrink'>
									</fu-image>
									<view
										class="name text-df w66  text-333 flex flex-direction  justify-between height-176">
										<view class="text-cut-2 "> {{ item.name }} </view>
										<view class="text-999 text-sm"> 销量{{ item.sales_sum ||0}} </view>
										<view class="text-prices text-price fu-fs32"> {{ item.shop_price||0 }} </view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<fu-empty-ui v-if='goodsList.length==0'></fu-empty-ui>
			</view>
		</view>
		<w-picker :visible.sync="visible" mode="range" :startYear="startYear" :endYear="endYear" :current="true"
			@confirm="onConfirm($event,'range')" ref="range"></w-picker>
		<!-- 选择日期 -->
		<w-picker v-if="dateList && dateList.length > 0" :visible.sync="dateVisible" mode="selector"
			:value="dateList[1].label" default-type="label" themeColor="#FD230D" :options="dateList"
			@confirm="onConfirm($event,'date')" ref="date">
		</w-picker>
		<!-- 未登录 -->
		<fu-nologin v-if="!isLogin"></fu-nologin>
		<!-- 网络监测 -->
		<fu-notwork></fu-notwork>
		<!-- 升级弹窗 -->
		<app-update auto></app-update>
	</view>
</template>
<script>
	// @see 引入组件wPicker
	import wPicker from "@/components/w-picker/w-picker.vue";
	import FuSwiper from "../../components/fu-swiper/fu-swiper.vue";
	import fuGrid from "../../components/fu-grid/fu-grid.vue";
	import FuAdvert from "../../components/fu-advert/fu-advert.vue";
	import BenSeckill from "../../components/ben-seckill/ben-seckill.vue";
	import BenAssemble from "../../components/ben-assemble/ben-assemble.vue";
	import FuNologin from "../../components/fu-nologin/fu-nologin.vue";
	import BenCoupon from "../../components/ben-coupon/ben-coupon.vue";
	// import echarts from '../../components/echarts/echarts.vue';
	var date = new Date();
	var y = Number(date.getFullYear());
	var m = Number(date.getMonth() + 1);
	var d = Number(date.getDate());
	if (m < 10) {
		m = '0' + m
	}
	if (d < 10) {
		d = '0' + d
	}

	let option = {
		// title: {
		// 	text: '在Vue中使用echarts'
		// },
		tooltip: {},
		xAxis: {
			data: [],
		},
		yAxis: {
			axisLabel: {
				formatter: function(value) {
					return value;
					if (value >= 1000) {
						return (value / 1000) + 'k';
					} else {
						return value;
					}

				}
			}
		},
		series: [{
			name: '销量',
			type: 'line',
			smooth: true,
			symbol: 'circle',
			showAllSymbol: true,
			data: [],
			areaStyle: {
				color: 'rgba(255, 170, 127, 0.5) '
			},
			label: {
				show: true,
				position: 'top'
			},
		}]
	}
	let option1 = {
		// title: {
		// 	text: '在Vue中使用echarts'
		// },
		tooltip: {},
		xAxis: {
			data: [],
		},
		yAxis: {
			axisLabel: {
				formatter: function(value) {
					return value;
					
					if (value >= 1000) {
						return (value / 1000) + 'k';
					} else {
						return value;
					}

				}
			}
		},
		series: [{
			name: '销量',
			type: 'line',
			smooth: true,
			areaStyle: {
				color: 'rgba(255, 170, 127, 0.5) '
			},
			lineStyle: {
				color: 'rgba(255, 170, 127,1) '
			},
			data: [],
			symbol: 'circle',
			showAllSymbol: true,
			label: {
				show: true,
				position: 'top'
			},
			itemStyle: {
				normal: {
					color: 'rgba(255, 170, 127,1) ',
				}
			}
		}]
	}
	// // 引入基本模板
	// let echarts = require('echarts/lib/echarts')

	export default {
		name: "shopindex",
		components: {
			FuSwiper,
			fuGrid,
			FuAdvert,
			BenSeckill,
			BenAssemble,
			FuNologin,
			BenCoupon,
			wPicker,
		},

		data() {
			return {
				showBar: true, // 显示悬浮搜索栏
				banners: [], // 轮播图
				bgColor: this.$store.state.themeColor, // 头部默认颜色
				animationData: {}, // 颜色渐变动画
				couponModel: false, // 优惠券弹窗
				order_price_tital: 0, //订单总额
				order_num_total: 0, //订单数
				orderPriceData: [], //订单总额
				orderNumData: [], //订单数
				location: {}, //定位信息
				visible: false, //日期组件
				startYear: y - 70, //开始年份
				endYear: y, //结束年份
				rangeVal: [y + m + d, y + m + d], //默认选择时间
				defalutValue: '[' + y + '-' + (m - 3) + '-' + d + ',' + y + '-' + m + '-' + d + ']', //进入页面默认展示时间 可按接口做调整
				dateValue: y + '-' + (m - 3) + '-' + d + '--' + y + '-' + m + '-' + d, //选择的日期
				start_time: y + '-' + (m - 3) + '-' + d, //开始日期
				end_time: y + '-' + m + '-' + d, //结束日期
				messageList: [], // 平台公告
				selecType: 0, //0 销量 1购物车
				dateList: [{
					label: '日',
					value: '1'
				}, {
					label: '周',
					value: '2'
				}, {
					label: '月',
					value: '3'
				}],
				selecTime: 0, //交易统计默认今日
				dateIndex1: 2, //订单总额日期 1：当天 2：最近7天 3：最近30天
				dateIndex2: 2, //订单数日期 1：当天 2：最近7天 3：最近30天
				dateVisible: false, //选择日期
				orderList: [{
					name: '待付款',
					thumb: '/static/home/or1.png',
					type: 'unpay'
				}, {
					name: '待接单',
					thumb: '/static/home/or2.png',
					type: 'taking'
				}, {
					name: '备货中',
					thumb: '/static/home/or3.png',
					type: 'ready',
				}, {
					name: '待配送',
					thumb: '/static/home/or4.png',
					type: 'send',
				}, {
					name: '待收货',
					thumb: '/static/home/or5.png',
					type: 'receive',
				}, {
					name: '待评价',
					thumb: '/static/home/or6.png',
					type: 'evaluate',
				}, {
					name: '退货售后',
					thumb: '/static/home/or7.png',
					type: 'refund'
				}, {
					name: '库存预警',
					thumb: '/static/home/or8.png',
					type: '7'
				}, ],
				date_act1: '周', //选择的日期
				date_act2: '周', //选择的日期
				statisticsInfo: '', //统计数据
				goodsList: [], // 排行榜
				seriesData: [0, 0],
				series1Data: [0, 0],
				dateType: '', // 1销售额 2 订单量
				option: option,
				option1: option1,
			};
		},
		computed: {
			isLogin() {
				return this.$store.getters.isLogin;
			},
			userInfo() {
				return this.$store.getters.userInfo;
			},
		},
		watch: {
			isLogin(newVal) {
				if (newVal) {
					this.$refs.benCoupon && this.$refs.benCoupon.getCoupon();
				}
			},
		},
		onLoad() {
			// run_type 1：入仓   2：非入仓

		},
		onShow() {
			uni.removeStorageSync('orderType')
			if (this.isLogin) {
				this.$store.dispatch("getCartList");
				this.getMessageNum();
				this.getStatistics()
				this.postIndexHome();
				this.postCompanyEarchtsInfoje(1)
				this.postCompanyEarchtsInfodd(2)
				if (global.userInfo.run_type == 1) {
					this.setTabBarItem1();
				} else { //非入仓
					this.setTabBarItem();
				}
			}
			this.getKfInfo()
			this.getInfo()
		},
		onUnload() {
			uni.$off('refreshInfo')
		},
		onPullDownRefresh() {
			this.getMessageNum();
			this.getStatistics()
			this.postIndexHome();
			this.postCompanyEarchtsInfoje(1)
			this.postCompanyEarchtsInfodd(2)
		},
		methods: {
			/**
			 * @function
			 * @description 获取客服信息
			 */
			getKfInfo() {
				this.$api
					.post('/v1/63da1e62db3d0')
					.then(res => {
						if (res.data.code == 1) {
							uni.setStorageSync('kfNum', res.data.data.contact_tel)
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			chooseTime(e) {
				this.selecTime = e
				this.getStatistics()
			},
			chooseType(e) {
				this.selecType = e
				this.postIndexHome()
			},
			/**
			 * @function
			 * @description 获取供应商信息
			 */
			getInfo() {
				this.$api
					.post('/v1/6356316a22bb0', {
						partner_id: (global.userInfo && global.userInfo.id) || 0, //店铺id
						user_id: (global.userInfo && global.userInfo.id) || 0
					})
					.then(res => {
						res = res.data;
						if (res.code == 1) {
							this.storeInfo = res.data
							// this.$store.commit('updateUserInfo', res.data);
							uni.setStorageSync('storeInfo', res.data)
							this.$forceUpdate();

						}
					});
			},
			/**
			 * @function
			 * @description 获取平台公告
			 */
			getMessageNum() {
				this.$api.post('/v1/618a38c0ca95f', {
					category_id: 7,
					page: 1
				}).then(res => {
					if (res.data.code == 1) {
						this.messageList = res.data.data.data;
					}
				});
			},
			// 交易统计数据
			getStatistics() {
				this.$api.post('/v1/63d9c6a3a2a58', {
					merchant_id: global.userInfo && global.userInfo.id, //merchant_id
					date_selection: this.selecTime == 0 ? 'day' : this.selecTime == 1 ? 'yesterday' :
						'total' //day今日 yesterday昨日 total总计
				}).then(res => {
					if (res.data.code == 1) {
						let count = res.data.data.order_status_count
						this.statisticsInfo = res.data.data;
						this.orderList[0].num = count.pay
						this.orderList[1].num = count.taking
						this.orderList[2].num = count.ready
						this.orderList[3].num = count.send
						this.orderList[4].num = count.receive
						this.orderList[5].num = count.evaluate
						this.orderList[6].num = count.refund_count
						this.orderList[7].num = count.goods_warning

					}
				});
			},
			// 待处理项
			toOrder(item, index) {
				// /run_type 1：入仓   2：非入仓
				if (this.userInfo.run_type == 1) {
					return
				}
				if (index != 7) {
					uni.setStorageSync('orderType', item.type)
					this.$urouter.switchTab({
						url: '/pages/order/order-list/all-order/index',
						params: {

						}
					})
				} else {
					this.$urouter.navigateTo({
						url: '/pages/goods/goodslist/goods-search/index',
						params: {

						}
					})
				}

			},
			// 查看更多订单
			toMoreOrder() {
				this.$urouter.navigateTo({
					url: '/pages/index/buyer/examineOrder',
					params: {
						user_type: this.userInfo.user_type
					}
				})
			},

			$uGetRect(selector, all) {
				return new Promise(resolve => {
					uni
						.createSelectorQuery()
						.in(this)[all ? 'selectAll' : 'select'](selector)
						.boundingClientRect(rect => {
							if (all && Array.isArray(rect) && rect.length) {
								resolve(rect);
							}
							if (!all && rect) {
								resolve(rect);
							}
						})
						.exec();
				});
			},
			drawLine(seriesData, series1Data) {
				let ordertime = []
				let orderdata = []
				let pricetime = []
				let pricedata = []
				pricetime = seriesData.time
				pricedata = seriesData.order_price

				ordertime = series1Data.time
				orderdata = series1Data.order_price
				console.log(ordertime, orderdata, pricetime, pricedata, 'pricedata');
				// 绘制图表
				option.xAxis.data = pricetime
				if (this.dateIndex1 != 3) {
					option.xAxis.axisLabel = {
						interval: 0
					}
				} else {
					option.xAxis.axisLabel = {
						interval: 4
					}
				}
				option.yAxis.axisLabel = {
					formatter: function(value) {
						return value; 
						// if (value >= 1000) {
						// 	return (value / 1000) + 'k';
						// } else {
						// 	return value;
						// }
					}
				}
				option.series = [{
					name: '销量',
					type: 'line',
					smooth: true,
					symbol: 'circle',
					showAllSymbol: this.dateIndex1 == 1 ? true : false,
					data: pricedata,
					lineStyle: {
						color: 'rgba(255, 170, 127,1) '
					},
					areaStyle: {
						color: 'rgba(255, 170, 127, 0.3) '
					},
					label: {
						show: true,
						position: 'top'
					},
					itemStyle: {
						normal: {
							color: 'rgba(255, 170, 127,1) ',
						}
					}
				}]
				option1.xAxis.data = ordertime
				if (this.dateIndex2 != 3) {
					option1.xAxis.axisLabel = {
						interval: 0
					}
				} else {
					option1.xAxis.axisLabel = {
						interval: 4
					}
				}

				option1.series = [{
					name: '销量',
					type: 'line',
					smooth: true,
					areaStyle: {
						color: 'rgba(255, 170, 127, 0.3) '
					},
					lineStyle: {
						color: 'rgba(255, 170, 127,1) '
					},
					data: orderdata,
					symbol: 'circle',
					showAllSymbol: this.dateIndex2 == 3 ? false : true,
					label: {
						show: true,
						position: 'top'
					},
					itemStyle: {
						normal: {
							color: 'rgba(255, 170, 127,1) ',
						}
					}
				}]

			},
			toggleTab(ref, e) {
				this.$refs[ref].show();
				this.dateType = e
			},
			onConfirm(result, type) {
				console.log(result, type, this.dateType, '===========');
				if (type == 'date') {
					if (this.dateType == 1) { //订单总额
						this.date_act1 = result.result
						this.dateIndex1 = result.value
					} else { //订单数
						this.date_act2 = result.result
						this.dateIndex2 = result.value
					}
					if (this.dateType == 1) {
						this.postCompanyEarchtsInfoje(1)
					} else {
						this.postCompanyEarchtsInfodd(2)
					}
				} else {
					this.dateValue = result.value;
					this.start_time = result.value.split('至')[0]
					this.end_time = result.value.split('至')[1]

				}
			},


			// 排行榜商品
			postIndexHome() {
				this.$api.post('/v1/63d9fb79e7bd0', {
					merchant_id: global.userInfo && global.userInfo.id, //merchant_id
					type: this.selecType == 0 ? 'sale' : 'cart' // sale销量 cart加购物车
				}).then((res) => {
					if (res.data.code == 1) {
						this.goodsList = res.data.data;
					}
				}).catch((err) => {
					console.error(err);
				});
			},
			// 销售额
			postCompanyEarchtsInfoje(type) {
				this.$api.post('/v1/63da1093bdbf0', {
					days: this.dateIndex1 == 1 ? 1 : this.dateIndex1 == 2 ? 7 : 30, //1：当天 2：最近7天 3：最近30天
					type: type, // 1销售额(订单金额) 2订单数 3订单商品数
					partner_id: global.userInfo && global.userInfo.id,
				}).then((res) => {
					if (res.data.code == 1) {
						let data = res.data.data
						// data.str_date.forEach((item) => {
						// 	item.time = item.time.split('-')
						// 	let time = [item.time[1], item.time[2]]
						// 	item.time = time.join('-')
						// })
						data.str_count=data.str_count.map(item=>{
							let a1=item/10000+''
							if(item>0){
								console.log(a1,'a1');
								return a1.split('.')[0]+'.'+a1.split('.')[1].substr(0,2)
							}else{
								return item
							}
						})
						console.log(data.str_count,'data.str_count');
						this.order_price_tital = data.total
						this.orderPriceData = {
							time: data.str_date,
							order_price: data.str_count
						}
						
						this.drawLine(this.orderPriceData, this.orderNumData)
					}
				}).catch((err) => {
					console.error(err);
				});
			},
			// 订单量
			postCompanyEarchtsInfodd(type) {
				this.$api.post('/v1/63da1093bdbf0', {
					days: this.dateIndex2 == 1 ? 1 : this.dateIndex2 == 2 ? 7 : 30, //1：当天 2：最近7天 3：最近30天
					type: type, // 1销售额(订单金额) 2订单数 3订单商品数
					partner_id: global.userInfo && global.userInfo.id,
				}).then((res) => {
					if (res.data.code == 1) {
						let data = res.data.data
						// data.orderNumData.forEach((item) => {
						// 	item.time = item.time.split('-')
						// 	let time = [item.time[1], item.time[2]]
						// 	item.time = time.join('-')
						// })
						this.order_num_total = data.total
						this.orderNumData = {
							time: data.str_date,
							order_price: data.str_count
						}
						// this.series1Data = data.orderNumData.reverse()
						this.drawLine(this.orderPriceData, this.orderNumData)
					}
				}).catch((err) => {
					console.error(err);
				});
			},
		},
	};
</script>
<script module="echarts" lang="renderjs">
	let myChart
	let myChart1
	export default {
		mounted() {
			console.log(document, '0000000000000000');
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('myChart'))
				console.log(myChart, 'myChart');
				myChart.setOption(this.option)
				myChart1 = echarts.init(document.getElementById('myChart1'))
				myChart1.setOption(this.option1)
			},
			updateEcharts1(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart1.setOption(newValue)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
				console.log(newValue, 'newValue');
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.top_num {
		display: inline-block;
		width: 38rpx;
		height: 38rpx;
		line-height: 38rpx;
		font-size: 28rpx;
		text-align: center;
		color: #fff;
		margin: 0 20rpx 0 0;
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.top_0 {
		background: linear-gradient(173deg, #F48977 0%, #F83326 100%);
	}

	.top_1 {

		background: linear-gradient(180deg, #FAB47F 0%, #ED6E41 100%);
	}

	.top_2 {

		background: linear-gradient(180deg, #FFD07C 0%, #F48F3D 100%);
	}

	.top_3 {
		background: linear-gradient(180deg, #EAEAEA 0%, #ADADAD 100%);
	}

	.contain {
		background: url(/static/home/home-bg.png);
		background-size: 100% 680rpx;
		background-repeat: no-repeat;
		height: 100vh;

		.bg-top {
			background: url(/static/home/home-bg.png);
			background-size: 100% 680rpx;
			background-repeat: no-repeat;
		}

		.search-form {
			border: 1px solid #fff;
			background: rgba(#fff, 0.4);
		}

		.echarts {
			width: 686rpx;
			height: 600rpx;
		}

		.swiper-wrap {
			position: relative;
			overflow: hidden;
			width: 702rpx;
			height: 320rpx;
			box-sizing: content-box;

			.swiper-bg {
				height: 320rpx;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				border-radius: 0 0 50% 50%;
			}
		}
	}

	.fu-top-pic {
		width: 40rpx;
		height: 40rpx;
	}

	.fu-message {
		position: relative;

		.fu-top-tag {
			position: absolute;
			top: -12rpx;
			right: -12rpx;
			/* width: 25rpx; */
			/* height: 25rpx; */
			/* padding:3rpx; */
			text-align: center;
			line-height: 25rpx;
			font-size: 24rpx;
			color: #ff6464;
			background-color: #fff;
			border: 1rpx solid #ff6464;
			width: auto;
			height: 32rpx;
			line-height: 32rpx;
			border-radius: 32rpx;
			min-width: 32rpx;
			padding: 0 4rpx;
		}
	}

	.jiaobiao {
		position: absolute;
		top: -10rpx;
		right: 35rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		background-color: #FF6464;
		border-radius: 100rpx;
		width: 40rpx;
		height: 40rpx;
		line-height: 38rpx;
		text-align: center;
		z-index: 9;
		transform: scale(0.65);
	}
</style>